<!DOCTYPE html>

<html dir="ltr" mozdisallowselectionprint>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
        />
        <meta name="google" content="notranslate" />
        <title>PDF.js viewer</title>

        <link rel="stylesheet" href="./css/font-awesome.min.css" />
        <link rel="stylesheet" href="./css/styles.css" />
        <link rel="stylesheet" href="./css/viewer.css" />

        <link
            rel="resource"
            type="application/l10n"
            href="locale/locale.properties"
        />
        <script src="build/pdf.js"></script>

        <script src="js/viewer.js"></script>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script src="./js/fabric.js"></script>
        <script src="./js/annotate.js"></script>
        <!--script src="./js/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole();
  </script-->
    </head>

    <body tabindex="1">
        <div id="outerContainer">
            <div id="sidebarContainer">
                <div id="toolbarSidebar">
                    <div id="toolbarSidebarLeft">
                        <div
                            id="sidebarViewButtons"
                            class="splitToolbarButton toggled"
                            role="radiogroup"
                        >
                            <button
                                id="viewThumbnail"
                                class="toolbarButton toggled"
                                title="Show Thumbnails"
                                tabindex="2"
                                data-l10n-id="thumbs"
                                role="radio"
                                aria-checked="true"
                                aria-controls="thumbnailView"
                            >
                                <span data-l10n-id="thumbs_label"
                                    >Thumbnails</span
                                >
                            </button>
                            <button
                                id="viewOutline"
                                class="toolbarButton"
                                title="Show Document Outline (double-click to expand/collapse all items)"
                                tabindex="3"
                                data-l10n-id="document_outline"
                                role="radio"
                                aria-checked="false"
                                aria-controls="outlineView"
                            >
                                <span data-l10n-id="document_outline_label"
                                    >Document Outline</span
                                >
                            </button>
                            <button
                                id="viewAttachments"
                                class="toolbarButton"
                                title="Show Attachments"
                                tabindex="4"
                                data-l10n-id="attachments"
                                role="radio"
                                aria-checked="false"
                                aria-controls="attachmentsView"
                            >
                                <span data-l10n-id="attachments_label"
                                    >Attachments</span
                                >
                            </button>
                            <button
                                id="viewLayers"
                                class="toolbarButton"
                                title="Show Layers (double-click to reset all layers to the default state)"
                                tabindex="5"
                                data-l10n-id="layers"
                                role="radio"
                                aria-checked="false"
                                aria-controls="layersView"
                            >
                                <span data-l10n-id="layers_label">Layers</span>
                            </button>
                        </div>
                    </div>

                    <div id="toolbarSidebarRight">
                        <div id="outlineOptionsContainer" class="hidden">
                            <div class="verticalToolbarSeparator"></div>

                            <button
                                id="currentOutlineItem"
                                class="toolbarButton"
                                disabled="disabled"
                                title="Find Current Outline Item"
                                tabindex="6"
                                data-l10n-id="current_outline_item"
                            >
                                <span data-l10n-id="current_outline_item_label"
                                    >Current Outline Item</span
                                >
                            </button>
                        </div>
                    </div>
                </div>
                <div id="sidebarContent">
                    <div id="thumbnailView"></div>
                    <div id="outlineView" class="hidden"></div>
                    <div id="attachmentsView" class="hidden"></div>
                    <div id="layersView" class="hidden"></div>
                </div>
                <div id="sidebarResizer"></div>
            </div>
            <!-- sidebarContainer -->

            <div id="mainContainer">
                <div class="findbar hidden doorHanger" id="findbar">
                    <div id="findbarInputContainer">
                        <input
                            id="findInput"
                            class="toolbarField"
                            title="Find"
                            placeholder="Find in document…"
                            tabindex="91"
                            data-l10n-id="find_input"
                            aria-invalid="false"
                        />
                        <div class="splitToolbarButton">
                            <button
                                id="findPrevious"
                                class="toolbarButton"
                                title="Find the previous occurrence of the phrase"
                                tabindex="92"
                                data-l10n-id="find_previous"
                            >
                                <span data-l10n-id="find_previous_label"
                                    >Previous</span
                                >
                            </button>
                            <div class="splitToolbarButtonSeparator"></div>
                            <button
                                id="findNext"
                                class="toolbarButton"
                                title="Find the next occurrence of the phrase"
                                tabindex="93"
                                data-l10n-id="find_next"
                            >
                                <span data-l10n-id="find_next_label">Next</span>
                            </button>
                        </div>
                    </div>

                    <div id="findbarOptionsOneContainer">
                        <input
                            type="checkbox"
                            id="findHighlightAll"
                            class="toolbarField"
                            tabindex="94"
                        />
                        <label
                            for="findHighlightAll"
                            class="toolbarLabel"
                            data-l10n-id="find_highlight"
                            >Highlight All</label
                        >
                        <input
                            type="checkbox"
                            id="findMatchCase"
                            class="toolbarField"
                            tabindex="95"
                        />
                        <label
                            for="findMatchCase"
                            class="toolbarLabel"
                            data-l10n-id="find_match_case_label"
                            >Match Case</label
                        >
                    </div>
                    <div id="findbarOptionsTwoContainer">
                        <input
                            type="checkbox"
                            id="findMatchDiacritics"
                            class="toolbarField"
                            tabindex="96"
                        />
                        <label
                            for="findMatchDiacritics"
                            class="toolbarLabel"
                            data-l10n-id="find_match_diacritics_label"
                            >Match Diacritics</label
                        >
                        <input
                            type="checkbox"
                            id="findEntireWord"
                            class="toolbarField"
                            tabindex="97"
                        />
                        <label
                            for="findEntireWord"
                            class="toolbarLabel"
                            data-l10n-id="find_entire_word_label"
                            >Whole Words</label
                        >
                    </div>

                    <div id="findbarMessageContainer" aria-live="polite">
                        <span id="findResultsCount" class="toolbarLabel"></span>
                        <span id="findMsg" class="toolbarLabel"></span>
                    </div>
                </div>
                <!-- findbar -->

                <div
                    id="secondaryToolbar"
                    class="secondaryToolbar hidden doorHangerRight"
                >
                    <div id="secondaryToolbarButtonContainer">
                        <button
                            id="secondaryPresentationMode"
                            class="secondaryToolbarButton visibleLargeView"
                            title="Switch to Presentation Mode"
                            tabindex="51"
                            data-l10n-id="presentation_mode"
                        >
                            <span data-l10n-id="presentation_mode_label"
                                >Presentation Mode</span
                            >
                        </button>

                        <button
                            id="secondaryOpenFile"
                            class="secondaryToolbarButton visibleLargeView"
                            title="Open File"
                            tabindex="52"
                            data-l10n-id="open_file"
                        >
                            <span data-l10n-id="open_file_label">Open</span>
                        </button>

                        <a
                            href="#"
                            id="secondaryViewBookmark"
                            class="secondaryToolbarButton visibleSmallView"
                            title="Current view (copy or open in new window)"
                            tabindex="55"
                            data-l10n-id="bookmark"
                        >
                            <span data-l10n-id="bookmark_label"
                                >Current View</span
                            >
                        </a>

                        <div
                            class="horizontalToolbarSeparator visibleLargeView"
                        ></div>

                        <button
                            id="firstPage"
                            class="secondaryToolbarButton"
                            title="Go to First Page"
                            tabindex="56"
                            data-l10n-id="first_page"
                        >
                            <span data-l10n-id="first_page_label"
                                >Go to First Page</span
                            >
                        </button>
                        <button
                            id="lastPage"
                            class="secondaryToolbarButton"
                            title="Go to Last Page"
                            tabindex="57"
                            data-l10n-id="last_page"
                        >
                            <span data-l10n-id="last_page_label"
                                >Go to Last Page</span
                            >
                        </button>

                        <div class="horizontalToolbarSeparator"></div>

                        <div id="cursorToolButtons" role="radiogroup">
                            <button
                                id="cursorSelectTool"
                                class="secondaryToolbarButton toggled"
                                title="Enable Text Selection Tool"
                                tabindex="60"
                                data-l10n-id="cursor_text_select_tool"
                                role="radio"
                                aria-checked="true"
                            >
                                <span
                                    data-l10n-id="cursor_text_select_tool_label"
                                    >Text Selection Tool</span
                                >
                            </button>
                            <button
                                id="cursorHandTool"
                                class="secondaryToolbarButton"
                                title="Enable Hand Tool"
                                tabindex="61"
                                data-l10n-id="cursor_hand_tool"
                                role="radio"
                                aria-checked="false"
                            >
                                <span data-l10n-id="cursor_hand_tool_label"
                                    >Hand Tool</span
                                >
                            </button>
                        </div>
                    </div>
                </div>
                <!-- secondaryToolbar -->

                <div class="toolbar">
                    <div id="toolbarContainer">
                        <div id="toolbarViewer">
                            <div id="toolbarViewerLeft">
                                <button
                                    id="sidebarToggle"
                                    class="toolbarButton hiddenLargeView"
                                    title="Toggle Sidebar"
                                    tabindex="11"
                                    data-l10n-id="toggle_sidebar"
                                    aria-expanded="false"
                                    aria-controls="sidebarContainer"
                                    style="display: auto"
                                >
                                    <span data-l10n-id="toggle_sidebar_label"
                                        >Toggle Sidebar</span
                                    >
                                </button>
                                <div class="toolbarButtonSpacer" style="display: auto"></div>
                                <button
                                    id="viewFind"
                                    class="toolbarButton hiddenLargeView"
                                    title="Find in Document"
                                    tabindex="12"
                                    data-l10n-id="findbar"
                                    aria-expanded="false"
                                    aria-controls="findbar"
                                >
                                    <span data-l10n-id="findbar_label"
                                        >Find</span
                                    >
                                </button>
                                <div class="splitToolbarButton">
                                    <button
                                        class="toolbarButton"
                                        title="Previous Page"
                                        id="previous"
                                        tabindex="13"
                                        data-l10n-id="previous"
                                    >
                                        <span data-l10n-id="previous_label"
                                            >Previous</span
                                        >
                                    </button>
                                    <div
                                        class="splitToolbarButtonSeparator"
                                    ></div>
                                    <button
                                        class="toolbarButton"
                                        title="Next Page"
                                        id="next"
                                        tabindex="14"
                                        data-l10n-id="next"
                                    >
                                        <span data-l10n-id="next_label"
                                            >Next</span
                                        >
                                    </button>
                                </div>
                                <input
                                    type="number"
                                    id="pageNumber"
                                    class="toolbarField"
                                    title="Page"
                                    value="1"
                                    size="4"
                                    min="1"
                                    tabindex="15"
                                    data-l10n-id="page"
                                    autocomplete="off"
                                />
                                <span id="numPages" class="toolbarLabel"></span>
                            </div>
                            <div id="toolbarViewerRight">
                                <button
                                    id="presentationMode"
                                    class="toolbarButton hiddenLargeView"
                                    title="Switch to Presentation Mode"
                                    tabindex="31"
                                    data-l10n-id="presentation_mode"
                                >
                                    <span data-l10n-id="presentation_mode_label"
                                        >Presentation Mode</span
                                    >
                                </button>

                                <button
                                    id="openFile"
                                    class="toolbarButton hiddenSmallView"
                                    title="Open File"
                                    tabindex="32"
                                    data-l10n-id="open_file"
                                >
                                    <span data-l10n-id="open_file_label"
                                        >Open</span
                                    >
                                </button>

                                <a
                                    href="#"
                                    id="viewBookmark"
                                    class="toolbarButton hiddenSmallView"
                                    title="Current view (copy or open in new window)"
                                    tabindex="35"
                                    data-l10n-id="bookmark"
                                >
                                    <span data-l10n-id="bookmark_label"
                                        >Current View</span
                                    >
                                </a>

                                <div
                                    class="verticalToolbarSeparator hiddenSmallView"
                                ></div>

                                <button
                                    id="secondaryToolbarToggle"
                                    class="toolbarButton"
                                    title="Tools"
                                    tabindex="36"
                                    data-l10n-id="tools"
                                    aria-expanded="false"
                                    aria-controls="secondaryToolbar"
                                >
                                    <span data-l10n-id="tools_label"
                                        >Tools</span
                                    >
                                </button>
                            </div>
                            <div id="toolbarViewerMiddle">
                                <div class="splitToolbarButton">
                                    <button
                                        id="zoomOut"
                                        class="toolbarButton"
                                        title="Zoom Out"
                                        tabindex="21"
                                        data-l10n-id="zoom_out"
                                    >
                                        <span data-l10n-id="zoom_out_label"
                                            >Zoom Out</span
                                        >
                                    </button>
                                    <div
                                        class="splitToolbarButtonSeparator"
                                    ></div>
                                    <button
                                        id="zoomIn"
                                        class="toolbarButton"
                                        title="Zoom In"
                                        tabindex="22"
                                        data-l10n-id="zoom_in"
                                    >
                                        <span data-l10n-id="zoom_in_label"
                                            >Zoom In</span
                                        >
                                    </button>
                                </div>
                                <span
                                    id="scaleSelectContainer"
                                    class="dropdownToolbarButton"
                                >
                                    <select
                                        id="scaleSelect"
                                        title="Zoom"
                                        tabindex="23"
                                        data-l10n-id="zoom"
                                    >
                                        <option
                                            id="pageAutoOption"
                                            title=""
                                            value="auto"
                                            selected="selected"
                                            data-l10n-id="page_scale_auto"
                                        >
                                            Automatic Zoom
                                        </option>
                                        <option
                                            id="pageActualOption"
                                            title=""
                                            value="page-actual"
                                            data-l10n-id="page_scale_actual"
                                        >
                                            Actual Size
                                        </option>
                                        <option
                                            id="pageFitOption"
                                            title=""
                                            value="page-fit"
                                            data-l10n-id="page_scale_fit"
                                        >
                                            Page Fit
                                        </option>
                                        <option
                                            id="pageWidthOption"
                                            title=""
                                            value="page-width"
                                            data-l10n-id="page_scale_width"
                                        >
                                            Page Width
                                        </option>
                                        <option
                                            id="customScaleOption"
                                            title=""
                                            value="custom"
                                            disabled="disabled"
                                            hidden="true"
                                        ></option>
                                        <option
                                            title=""
                                            value="0.5"
                                            data-l10n-id="page_scale_percent"
                                            data-l10n-args='{ "scale": 50 }'
                                        >
                                            50%
                                        </option>
                                        <option
                                            title=""
                                            value="0.75"
                                            data-l10n-id="page_scale_percent"
                                            data-l10n-args='{ "scale": 75 }'
                                        >
                                            75%
                                        </option>
                                        <option
                                            title=""
                                            value="1"
                                            data-l10n-id="page_scale_percent"
                                            data-l10n-args='{ "scale": 100 }'
                                        >
                                            100%
                                        </option>
                                        <option
                                            title=""
                                            value="1.25"
                                            data-l10n-id="page_scale_percent"
                                            data-l10n-args='{ "scale": 125 }'
                                        >
                                            125%
                                        </option>
                                        <option
                                            title=""
                                            value="1.5"
                                            data-l10n-id="page_scale_percent"
                                            data-l10n-args='{ "scale": 150 }'
                                        >
                                            150%
                                        </option>
                                        <option
                                            title=""
                                            value="2"
                                            data-l10n-id="page_scale_percent"
                                            data-l10n-args='{ "scale": 200 }'
                                        >
                                            200%
                                        </option>
                                        <option
                                            title=""
                                            value="3"
                                            data-l10n-id="page_scale_percent"
                                            data-l10n-args='{ "scale": 300 }'
                                        >
                                            300%
                                        </option>
                                    </select>
                                </span>
                            </div>
                        </div>
                        <div id="loadingBar">
                            <div class="progress">
                                <div class="glimmer"></div>
                            </div>
                        </div>
                    </div>

                    <div class="tool-separate"></div>

                    <div class="tool">
                        <label for="">线条</label>
                        <input
                            type="number"
                            value="1"
                            id="brush-size"
                            max="50"
                            min="1"
                        />
                    </div>
                    <div class="tool-separate"></div>
                    <div class="tool">
                        <label for=""></label>
                        <div
                            class="toolbar-button-drop-button"
                            title="颜色"
                        ></div>
                        <div class="color-plate">
                            <div
                                class="color-plate-item"
                                style="background-color: #000000"
                                title="#000000"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #ef4437"
                                title="#EF4437"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #e71f63"
                                title="#E71F63"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #8f3e97"
                                title="#8F3E97"
                            ></div>

                            <div
                                class="color-plate-item"
                                style="background-color: #65499d"
                                title="#65499D"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #4554a4"
                                title="#4554A4"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #2083c5"
                                title="#2083C5"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #35a4dc"
                                title="#35A4DC"
                            ></div>

                            <div
                                class="color-plate-item"
                                style="background-color: #09bcd3"
                                title="#09BCD3"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #009688"
                                title="#009688"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #43a047"
                                title="#43A047"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #8bc34a"
                                title="#8BC34A"
                            ></div>

                            <div
                                class="color-plate-item"
                                style="background-color: #fdc010"
                                title="#FDC010"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #f8971c"
                                title="#F8971C"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #f0592b"
                                title="#F0592B"
                            ></div>
                            <div
                                class="color-plate-item"
                                style="background-color: #f06291"
                                title="#F06291"
                            ></div>
                        </div>
                    </div>
                    <div class="tool-separate"></div>
                    <div class="tool">
                        <label for="">字体</label>
                        <select id="font-size">
                            <option value="10">10</option>
                            <option value="12">12</option>
                            <option value="16" selected>16</option>
                            <option value="18">18</option>
                            <option value="24">24</option>
                            <option value="32">32</option>
                            <option value="48">48</option>
                            <option value="64">64</option>
                            <option value="72">72</option>
                            <option value="108">108</option>
                        </select>
                    </div>
                    <div class="tool-separate"></div>
                    <div class="tool">
                        <button
                            class="tool-button active"
                            onclick="enableSelector(event)"
                            id="toolButtonHand"
                        >
                            <i class="fa fa-hand-paper-o" title="手柄"></i>
                        </button>
                    </div>
                    <div class="tool">
                        <button
                            class="tool-button"
                            onclick="enablePencil(event)"
                        >
                            <i class="fa fa-pencil" title="画笔"></i>
                        </button>
                    </div>
                    <div class="tool">
                        <button
                            class="tool-button"
                            onclick="enableAddText(event)"
                        >
                            <i class="fa fa-font" title="添加文字"></i>
                        </button>
                    </div>
                    <div class="tool">
                        <button
                            class="tool-button"
                            onclick="enableRectangle(event)"
                        >
                            <i class="fa fa-square-o" title="添加矩形"></i>
                        </button>
                    </div>
                    <div class="tool">
                        <button
                            class="tool-button"
                            onclick="enableCircle(event)"
                        >
                            <i class="fa fa-circle-o" title="添加圆形"></i>
                        </button>
                    </div>
                    <div class="tool">
                        <button class="tool-button" onclick="enableLead(event)">
                            <i class="fa fa-thumb-tack" title="添加引线"></i>
                        </button>
                    </div>
                    <!-- 暂时去掉图片 -->
                    <!-- <div class="tool">
                        <button class="tool-button" onclick="addImage(event)">
                            <i class="fa fa-picture-o" title="添加图片"></i>
                        </button>
                    </div> -->
                    <div class="tool">
                        <button
                            class="tool-button"
                            id="undoButton"
                            onclick="undo(event)"
                        >
                            <i class="fa fa-undo" title="撤销"></i>
                        </button>
                    </div>
                    <div class="tool">
                        <button
                            class="tool-button"
                            id="redoButton"
                            onclick="redo(event)"
                        >
                            <i class="fa fa-repeat" title="恢复撤销"></i>
                        </button>
                    </div>
                </div>

                <div id="viewerContainer" tabindex="0">
                    <div id="viewer" class="pdfViewer"></div>
                </div>

                <div id="errorWrapper" hidden="true">
                    <div id="errorMessageLeft">
                        <span id="errorMessage"></span>
                        <button
                            id="errorShowMore"
                            data-l10n-id="error_more_info"
                        >
                            More Information
                        </button>
                        <button
                            id="errorShowLess"
                            data-l10n-id="error_less_info"
                            hidden="true"
                        >
                            Less Information
                        </button>
                    </div>
                    <div id="errorMessageRight">
                        <button id="errorClose" data-l10n-id="error_close">
                            Close
                        </button>
                    </div>
                    <div id="errorSpacer"></div>
                    <textarea
                        id="errorMoreInfo"
                        hidden="true"
                        readonly="readonly"
                    ></textarea>
                </div>
            </div>
            <!-- mainContainer -->

            <div id="dialogContainer">
                <dialog id="passwordDialog">
                    <div class="row">
                        <label
                            for="password"
                            id="passwordText"
                            data-l10n-id="password_label"
                            >Enter the password to open this PDF file:</label
                        >
                    </div>
                    <div class="row">
                        <input
                            type="password"
                            id="password"
                            class="toolbarField"
                        />
                    </div>
                    <div class="buttonRow">
                        <button id="passwordCancel" class="dialogButton">
                            <span data-l10n-id="password_cancel">Cancel</span>
                        </button>
                        <button id="passwordSubmit" class="dialogButton">
                            <span data-l10n-id="password_ok">OK</span>
                        </button>
                    </div>
                </dialog>
            </div>
            <!-- dialogContainer -->
        </div>
        <!-- outerContainer -->
        <input
            type="file"
            id="fileInput"
            accept="application/pdf"
            class="hidden"
        />
    </body>
</html>
